<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ZLTool-设备管理</title>
    <link rel="icon" href="/static/icon.png">
    <link rel="stylesheet" href="/static/base.css"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/theme-chalk/index.min.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/index.min.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

    <style>
        .pagination {
            margin-top: 16px;
            text-align: right;
        }

        .latlng-border {
            position: relative;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
        }

        .latlng-border input {
            border-width: 0px;
            vertical-align: center;
            margin: 0px !important;
            padding: 0px !important;
            border-radius: 0px;
            height: 36px;
            width: 100px;
        }

        .latlng-label {
            font-size: 13px;
            margin-right: 20px;
            color: #909399;
        }

        .latlng-btn button {
            background-color:  #F5F7FA;
            color: #909399;
            border-left: 0px;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
        }

        .latlng-border .el-input {
            width: 110px;
        }

        .clear-latlng {
            cursor: pointer;
            opacity: 0.5;
        }

    </style>
</head>
<body>
<div id="app">
    <layout>
        <template #menu>
            <top-menu index="sys/server.html"></top-menu>
        </template>
        <template #main>
            <el-container>
                <el-aside width="200px">
                    <sys-menu index="tags.html"></sys-menu>
                </el-aside>
                <el-main>
                    <el-form :inline="true" :model="searchForm">
                        <el-form-item>
                            <el-button @click="showAddDialog" type="primary">添加标签</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table :data="tableData" style="width: 100%" v-loading="tableLoading">
                        <el-table-column label="#" type="index" width="50"></el-table-column>
                        <el-table-column label="ID" prop="id" width="180"></el-table-column>
                        <el-table-column prop="content" label="标签内容"></el-table-column>
                        <el-table-column label="创建时间" width="160">
                            <template slot-scope="scope">
                                {{ unix2Date(scope.row.created_at) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="170" header-align="center" align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" type="text" @click="modify(scope.row)">编辑</el-button>
                                <el-button size="mini" type="text" @click="remove(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            :hide-on-single-page="true"
                            @current-change="handleCurrentChange"
                            :current-page.sync="current"
                            :page-size="pageSize"
                            layout="prev, pager, next"
                            class="pagination"
                            :total="total">
                    </el-pagination>
                </el-main>
            </el-container>
        </template>

    </layout>

    <el-dialog :title="addForm.id ? '编辑标签' : '添加标签'" :visible.sync="addDialogVisible" width="50%" :close-on-click-modal="false"
               @closed="closeAddDialog">
        <el-form :model="addForm" ref="addForm" :rules="addRules" label-width="100px"
                 v-loading="formLoading">
            <el-form-item label="标签内容" prop="content">
                <el-input v-model="addForm.content" placeholder="请输入标签内容" maxlength="50" clearable></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addEvent" :disabled="formLoading">提 交</el-button>
        </span>
    </el-dialog>

</div>
</body>
<script src="/static/layout.js"></script>
<script src="/static/menu.js"></script>
<script src="/static/sys-menu.js"></script>
<script src="/static/request.js"></script>

<script>
    var t = new Vue({
        el: '#app',
        data: function() {
            return {
                searchForm: {
                },
                addForm: {
                    id: '',
                    content: '',
                },
                tableLoading: false,
                formLoading: false,
                tableData: [],
                addDialogVisible: false,
                current: 1,
                pageSize: 0,
                total: 0,
                addRules: {
                    content: [
                        {required: true, message: '请输入标签内容', trigger: 'blur'},
                    ],
                }
            }
        },
        created: function () {
            this.$nextTick(() => {
                this.loadList()
            });
        },
        methods: {
            showAddDialog() {
                this.addDialogVisible = true
            },

            //添加
            addEvent() {
                this.$refs["addForm"].validate((valid) => {
                    if (valid) {
                        // 添加流
                        this.formLoading = true
                        request.post(
                            `/sys/tags/${this.addForm.id ? 'update' : 'add'}`,
                            Qs.stringify(this.addForm)
                        ).then(res => {
                            if (res.data) {
                                let data = res.data;
                                if (data.code === 0) {

                                    //当前页最后一条
                                    if(this.tableData.length === this.pageSize) {
                                        //当前是当前页最后一条，则页数需要+1
                                        this.current += 1
                                    }

                                    this.loadList()
                                    this.formLoading = false
                                    this.addDialogVisible = false
                                } else {
                                    this.formLoading = false
                                    this.$message.error(data.msg);
                                }
                            }
                            this.formLoading = false
                        }).catch(onError);

                    } else {
                        return false;
                    }
                });
            },

            loadList() {
                this.tableLoading = true
                var params = new URLSearchParams()
                params.append('currentPage', this.current)
                request.post('/sys/tags/page', params).then(res => {
                    this.tableLoading = false
                    if (res.data) {
                        let data = res.data;
                        if (data.code === 0) {
                            this.tableData = data.data
                            this.total = data.total
                            this.pageSize = data.pageOffset
                        } else {
                            this.$message.error(data.msg);
                        }
                    }
                }).catch(onError);
            },

            //修改
            modify(r) {
                this.addForm = JSON.parse(JSON.stringify(r))
                this.addDialogVisible = true
            },

            //删除
            remove(row) {
                this.$confirm(`确认删除标签【${row.content}】吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.post(`/sys/tags/delete/${row.id}`).then(res => {
                        if (res.data) {
                            let data = res.data;
                            if (data.code === 0) {
                                //非第一页
                                if(this.current > 1 && this.tableData.length === 1) {
                                    //当前不是第一页，如果删除的是某一页的最后一条，则页数需要减1
                                    this.current -= 1
                                }
                                this.loadList()
                            } else {
                                this.$message.error(data.msg);
                            }
                        }
                    }).catch(onError);
                }).catch(() => { });
            },

            //页数
            handleCurrentChange(val) {
                this.current = val
                this.loadList()
            },

            closeAddDialog() {
                this.$refs["addForm"].resetFields()
                this.addForm = {}
            },

            unix2Date(ud) {
                if(ud) {
                    var dataStr = moment(ud).format('YYYY-MM-DD HH:mm:ss')
                    return dataStr
                }
                return "--"
            }
        }
    })

</script>
</html>